<template>
	<view class="w-100">
		<view class="flex-1 mt-2">
			<view class="flex-1 row-ac mx-3">
				<view class="row-ac font-s-3 text-light-grey ml-3" style="width: 120rpx;">收货人</view>
				<view class="flex-1 ml-2 mr-5 border-bottom">
					<input type="text" v-model="fromAddress.name" value="" placeholder="收货人" class="py-2" />
				</view>
			</view>
			<view class="flex-1 row-ac mx-3 mt-2">
				<view class="row-ac font-s-3 text-light-grey ml-3" style="width: 120rpx;">联系电话</view>
				<view class="flex-1 ml-2 mr-5 border-bottom">
					<input type="text" v-model="fromAddress.mobile" value="" placeholder="联系电话" class="py-2" />
				</view>
			</view>
			<view class="flex-1 row-ac mx-3 mt-2">
				<view class="row-ac font-s-3 text-light-grey ml-3" style="width: 120rpx;">收货地址</view>
				<view class="flex-1 ml-2 mr-2 border-bottom">
					<view class="py-2" v-if="take_province"><text>{{ take_province }}</text><text
							class="ml-1">{{ take_city }}</text><text class="ml-1">{{ take_district }}</text>
					</view>
					<view class="py-2 text-muted" v-else>选择省市区</view>
				</view>
				<view class="font-s-35 mx-2" @click="selectAddress">选择</view>
			</view>
			<view class="flex-1 row-ac mx-3 mt-2">
				<view class="row-ac font-s-3 text-light-grey ml-3" style="width: 120rpx;">详细地址</view>
				<view class="flex-1 ml-2 mr-5 border-bottom">
					<input type="text" v-model="fromAddress.detail" value="" placeholder="详细地址" class="py-2" />
				</view>
			</view>
			<view class="flex-1 mt-5 row">
				<view class="add-box rounded row">取消</view>
				<view class="add-box ml-4 row rounded" @click="postAddres">保存</view>
			</view>
		</view>
		<leson-popup ref="lesonDialog" :popupStatu="lesonpopup" @statusChanged="handleStatusChanged">
			<view class="flex-1 py-3 mx-5">
				<view class="flex-1 row-ac justify-end" @click="cloesPopup">
					<view class="determine-box row font-s-35">确定</view>
				</view>
				<view class="flex-1 row-ac font-s-35 pt-2">
					<view class="text-muted mr-1">选择:</view>
					<view>
						<text>{{ take_province }}</text><text class="ml-1">{{ take_city }}</text><text
							class="ml-1">{{ take_district }}</text>
					</view>
				</view>
				<view class="flex-1 py-3">
					<view class="flex-1 row-ac text-muted">
						<view class="flex-1">省</view>
						<view class="flex-1 row">市</view>
						<view class="flex-1 row-ac justify-end">区/县</view>
					</view>
				</view>
				<view class="flex-1 d-f pb-2">
					<view class="flex-1" style="height: 800rpx;">
						<scroll-view scroll-y class="flex-1" style="height: 800rpx;" @scrolltolower="provinceTolower">
							<view class="flex-1 address-item mb-4" v-for="(item,index) in provinceList" :key="index"
								@click="takeProvince(item, index)">
								<view class="province-name font-s-35"
									:class="provinceIndex == index ? 'text-dark font-w' : 'text-muted'">{{ item.name }}
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="flex-1" style="height: 800rpx;">
						<scroll-view scroll-y class="flex-1" style="height: 800rpx;">
							<view class="flex-1 address-item mb-4 row" v-for="(item,index) in cityList" :key="index"
								@click="takeCity(item, index)">
								<view class="province-name font-s-35"
									:class="cityIndex == index ? 'text-dark font-w' : 'text-muted'">{{ item.name }}
								</view>
							</view>
						</scroll-view>
					</view>
					<view class="flex-1" style="height: 800rpx;">
						<scroll-view scroll-y class="flex-1" style="height: 800rpx;">
							<view class="flex-1 address-item mb-4 row-ac justify-end"
								v-for="(item,index) in districtList" :key="index" @click="takeDistrict(item, index)">
								<view class="province-name font-s-35"
									:class="districtIndex == index ? 'text-dark font-w' : 'text-muted'">{{ item.name }}
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
			</view>
		</leson-popup>
	</view>
</template>

<script>
	import {
		addressDetailUrl,
		addressCreateUrl,
		addressUpdateUrl,
		commonareaListUrl,
		addressListUrl
	} from '@/api/index.js';
	import lesonPopup from "@/components/leson-popup"
	export default {
		components: {
			lesonPopup
		},
		data() {
			return {
				editStutas: true,
				lesonpopup: false,
				addressId: '',
				fromAddress: {
					name: '',
					mobile: '',
					province: '',
					city: '',
					district: '',
					detail: '',
					is_default: false
				},
				getAddressId: '',
				areaQueryInfo: {
					parent_id: 0,
					page_size: 35
				},
				provinceIndex: 0,
				provinceList: [],
				provinceTotal: 0,
				take_province: '',
				take_city: '',
				take_district: '',
				cityIndex: 0,
				cityList: [],
				cityTotal: 0,
				districtIndex: 0,
				districtList: [],
				districtTotal: 0

			}
		},
		onLoad(options) {
			if (options.addressId) {
				this.getAddressId = options.addressId
				this.editStutas = false
				this.getAddresDetail()
			} else {
				this.editStutas = true
			}
		},
		created() {
			this.init()
		},
		onShow() {
			this.init()
		},
		methods: {
			init() {
				this.getProvinceareaList()
				this.getAddressList()
			},
			getAddresDetail() {
				this.$R.get(addressDetailUrl + this.getAddressId + '/').then(res => {
					if (res.code == 200) {
						this.fromAddress = {
							name: res.data.name,
							mobile: res.data.mobile,
							province: res.data.province,
							city: res.data.city,
							district: res.data.district,
							detail: res.data.detail,
							is_default: res.data.is_default,
						}
						this.take_province = res.data.province_name
						this.take_district = res.data.district_name
						this.take_city = res.data.city_name
					}
				})
			},
			getAddressList() {
				this.$R.get(addressListUrl).then(res => {
					if (res.data.list.length == 0) {
						this.fromAddress.is_default = true
					}
				})
			},
			postAddres() {
				if (this.editStutas) {
					this.$R.post(addressCreateUrl, this.fromAddress).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '添加成功'
							});
							uni.navigateBack({
								delta: 1
							});
						}
					})
				} else {
					this.$R.put(addressUpdateUrl + this.getAddressId + '/', this.fromAddress).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '修改成功'
							});
							uni.navigateBack({
								delta: 1
							});
						}
					})
				}

			},
			getProvinceareaList() {
				this.$R.get(commonareaListUrl, this.areaQueryInfo).then(res => {
					if (res.code == 200) {
						this.provinceList = res.data.list
						this.provinceTotal = res.data.total
						this.areaQueryInfo.parent_id = this.provinceList[0].id
						this.fromAddress.province = this.provinceList[0].id
						this.getCityareaList()
					}
				})
			},

			getCityareaList() {
				this.$R.get(commonareaListUrl, this.areaQueryInfo).then(res => {
					if (res.code == 200) {
						this.cityList = res.data.list
						this.take_city = this.cityList[0].name
						this.areaQueryInfo.parent_id = this.cityList[0].id
						this.fromAddress.city = this.cityList[0].id
						this.cityTotal = res.data.total
						this.getDistrictareaList()
					}
				})
			},
			getDistrictareaList() {
				this.$R.get(commonareaListUrl, this.areaQueryInfo).then(res => {
					if (res.code == 200) {
						this.districtList = res.data.list
						this.take_district = this.districtList[0].name
						this.areaQueryInfo.parent_id = this.districtList[0].id
						this.fromAddress.district = this.districtList[0].id
						this.districtTotal = res.data.total
					}
				})
			},
			provinceTolower(e) {
				if (e.detail.direction == 'bottom') {
					if (this.provinceTotal != this.provinceList.length) {
						this.areaQueryInfo.page_size++;
						this.getCommonareaList()
					}
				}
			},
			takeProvince(item, index) {
				this.provinceIndex = index
				this.take_province = item.name
				this.areaQueryInfo.parent_id = item.id
				this.fromAddress.province = item.id
				console.log('选择省份', this.fromAddress.province);
				this.getCityareaList()
			},
			takeCity(item, index) {
				this.cityIndex = index
				this.take_city = item.name
				this.areaQueryInfo.parent_id = item.id
				this.fromAddress.city = item.id
				console.log('选择城市', this.fromAddress.city);
				this.getDistrictareaList()
			},
			takeDistrict(item, index) {
				this.districtIndex = index
				this.take_district = item.name
				this.fromAddress.district = item.id
				console.log('选择区', this.fromAddress.district);
			},
			selectAddress() {
				this.lesonpopup = true
			},
			handleStatusChanged(newVal) {
				this.lesonpopup = newVal
			},
			cloesPopup() {
				this.$refs.lesonDialog.close()
			},
		}
	}
</script>

<style lang="scss">
	.add-box {
		width: 220rpx;
		height: 80rpx;
		border: 1rpx solid #AAAAAA;
	}

	.determine-box {
		width: 120rpx;
		height: 52rpx;
		border: 1rpx solid #000;
		color: #000;
	}
</style>